<!-- 可以禁用的按钮 -->
<template lang="pug">
div(
    :class="{disabled: disabled, active: !disabled}"
    @click.once="clickOnce"
    @click="click"
    ) {{ text }}
</template>

<script>
/*
  事件
    click         点击一行
    click-once    点击执行一次就失效
*/

export default {
  name: "Button",
  props: {
    // 按钮显示的文字
    text: {
      type: String,
      default: "",
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
  },

  methods: {
    clickOnce() {
      if (!this.disabled) {
        this.$emit("click-once")
      }
    },
    click() {
      if (!this.disabled) {
        this.$emit("click")
      }
    },
  },
}
</script>

<style lang="stylus" scoped>

.c-root
  padding: 0.3rem 1rem
  border-radius: 0.5rem
  text-align: center
  background: teal500
  color: white

.disabled
  background: grey400
  color: grey900

.active:active
  background: blue500

</style>
